<!--用户认证-->
<template>
	<view class="ma-24">
		<view v-if="loading" class="flex flex-row flex-row-center-center px-50 py-24">
			<tm-icon spin name="tmicon-shuaxin"></tm-icon>
		</view>
		<block v-else>
			<!--帐户认证类型-->
			<view class="white round-5 c_yy">
				<tm-input @click="showCategory = !showCategory" transprent prefixLabel="帐户认证类型" :margin="[0, 10]"
					:padding="[0, 0]" :input-padding="[24, 0]" :height="88" :round="5"
					:model-value="category[categoryIndex].title" align="right" disabled placeholder="请选择注册帐号类型">
					<template v-slot:right>
						<view class="ml-20">
							<tm-icon color="#C8C8C8" :font-size="28" name="tmicon-angle-right"></tm-icon>
						</view>
					</template>
				</tm-input>
			</view>
			<!--个人认证-->
			<view class="mt-33 pa-24">

				<view class="flex flex-row flex-row-center-start">
					<view class="c_grimg">
						<tm-image :round="0" :width="133" :height="54"
							:src="getStatsImg(true, submitData.auth_type)"></tm-image>
					</view>
					<view class="ml-20 text-size-g text-weight-b">
						添加证件材料
						<text class="c_txthong">({{ submitData.auth_state_text }})</text>
					</view>
				</view>
				<view class="pt-24 text-size-g">联系人手机号码</view>
				<view class="pt-24">
					<tm-input v-model="submitData.mobile" :searchWidth="150" :height="88" placeholder="请输入手机号码"></tm-input>
				</view>
				<view class="pt-24 text-size-g">{{ category[categoryIndex].name == 1 ? '用户姓名' : '法人或者联系人姓名' }}</view>
				<view class="pt-24">
					<tm-input v-model="submitData.realname" :height="88" placeholder="请输入真实姓名"></tm-input>
				</view>

				<view class="pt-24 text-size-g">{{ category[categoryIndex].name == 1 ? '身份证号码' : '证件号码' }}</view>
				<tm-input v-model="submitData.code" :height="88" placeholder="请输入正确的证件号码"></tm-input>

				<block v-if="category[categoryIndex].name == 1">
					<view class="pt-24 flex flex-row flex-row-center-start">
						<view>
							<view>身份证正面</view>
							<view class="pt-24">
								<!-- <view class="c_sfzimg">
								<tm-image :round="3" :width="302" :height="180" :src="imgHost('c_15.png')"></tm-image>
							</view> -->
								<tm-upload :max-file="1" v-model="idcard_front"
									:default-value="idcard_front" :width="302" :imageHeight="180" :rows="1"
									:url="user.uploadUrl" :header="{
										token: user.getToken
									}">
								</tm-upload>
							</view>
							<view class="pt-24 text-align-center text-size-s c_shenhui">请正面拍摄清晰</view>
						</view>
						<view class="ml-48">
							<view>身份证反面</view>
							<view class="pt-24">
								<tm-upload :max-file="1" v-model="idcard_backed"
									:default-value="idcard_backed" :width="302" :imageHeight="180" :rows="1"
									:url="user.uploadUrl" :header="{
										token: user.getToken
									}">
								</tm-upload>
							</view>
							<view class="pt-24 text-align-center text-size-s c_shenhui">请上传反面</view>
						</view>
					</view>
				</block>


				<block v-else>
					<view class="pt-24 text-size-g">机构/学校/机关单位等全称</view>
					<view class="pt-24">
						<tm-input v-model="submitData.company_name" :height="88" placeholder="请输入所在单位全名称，不允许简称！"></tm-input>
					</view>
					<view class="pt-24">
						<tm-upload :max-file="1" v-model="company_idcard"
							:default-value="company_idcard" :width="655" :imageHeight="290" :rows="1"
							:url="user.uploadUrl" :header="{
								token: user.getToken
							}">
						</tm-upload>
						<view class="pt-27 text-align-center text-size-s c_shenhui">请上传正确且清晰的证件原件照片</view>

					</view>
				</block>


				<view  v-if="submitData?.auth_state!=3" class="pt-24">
					<tm-button  @click="submit" block :round="3" label="提交资料"></tm-button>
				</view>
				<view v-if="submitData?.auth_state!=3" class="pt-24 text-align-center text-size-s c_shenhui">重新编辑资料并提交，用户会进入重新审核中</view>
			</view>

			<tm-action-menu @change="typeChange" v-model="showCategory" v-model:active="categoryIndex" rang-key="title"
				:list="category"></tm-action-menu>

		</block>
	</view>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from "vue"
import { imgHost } from "@/libs/imgHost";
import { useStoreUser } from "@/libs/useStoreUser";
import { onLoad } from "@dcloudio/uni-app";
import { apiUr } from "@/libs/api"
import { FuwuqiObjToFile, fileToFuwuqiObj } from "@/libs/util"
import { isIdCard, isPhone } from "@/tmui/tool/function/util";
const category = [
	{ title: "个人用户", name: 1 },
	{ title: "政府机关", name: 2 },
	{ title: "研发机构", name: 3 },
	{ title: "高等院校", name: 4 },
	{ title: "行业企业", name: 5 },
]
const categoryIndex = ref(0)
const showCategory = ref(false)
const user = useStoreUser();

const idcard_front = ref([])
const idcard_backed = ref([])
const company_idcard = ref([])

const loading = ref(true)

const submitData = ref({
	auth_state: false,
	auth_state_text: "未认证",
	auth_text: "未认证",
	auth_type: 1,
	"mobile": "",
	"realname": "",
	"idcard_front": [],
	"idcard_backed": [],
	"company_name": "",
	"company_idcard": [],
	// 身份证/证件号码 
	"code": "",
})

function typeChange(item: any) {
	submitData.value.auth_type = item.name
}
onLoad(async () => {
	// await user.getUserInfo()
	getRenzhengZiliao()
})



async function submit(){
	let idcard_front_str = fileToFuwuqiObj(idcard_front.value)
	let idcard_backed_str = fileToFuwuqiObj(idcard_backed.value)
	let company_idcard_str = fileToFuwuqiObj(company_idcard.value)
	if(submitData.value.auth_type==1){
		if(!submitData.value.realname){
			uni.showToast({title:"姓名没有填写",mask:true,icon:'error'})
			return;
		}
		if(!isPhone(submitData.value.mobile)){
			uni.showToast({title:"手机号不正确",mask:true,icon:'error'})
			return;
		}
		if(!isIdCard(submitData.value.code)){
			uni.showToast({title:"身份证号不对",mask:true,icon:'error'})
			return;
		}

		if(
			idcard_backed_str.length==0||
			idcard_backed_str.length==0
		){
			uni.showToast({title:"身份证图片没上传完整",mask:true,icon:'error'})
			return;
		}
		
	}else{
		if(!isPhone(submitData.value.mobile)){
			uni.showToast({title:"手机号不正确",mask:true,icon:'error'})
			return;
		}
		if(
			!submitData.value.realname||
			!submitData.value.company_name||
			!submitData.value.code||
			company_idcard_str.length==0
		){
			uni.showToast({title:"未填写完整",mask:true,icon:'error'});
			return;
		}
	}

	let data = {
		...submitData.value,
		"idcard_front": idcard_front_str,
		"idcard_backed": idcard_backed_str,
		"company_idcard": company_idcard_str,
	}

	uni.showLoading({ title: '...', mask: true });
	await apiUr.submitAuth(data);
	uni.showModal({
		title:"提醒",
		content:"资料提交成功，请等候认证审核成功，不要重复提交，重新提交会重新进入审核状态。",
		showCancel:false,
		success(result) {
			uni.navigateBack({})
		},
	})

}





async function getRenzhengZiliao() {

	uni.showLoading({ title: '...', mask: true });
	let rqd = await apiUr.getUserAuthInfo();
	
	let data = rqd.data;
	data.auth_type = data.auth_type || 1;
	
	categoryIndex.value = data.auth_type - 1;

	idcard_front.value = FuwuqiObjToFile(data.idcard_front)
	idcard_backed.value = FuwuqiObjToFile(data.idcard_backed)
	company_idcard.value = FuwuqiObjToFile(data.company_idcard)

	submitData.value = {
		...data,
		"idcard_front": [],
		"idcard_backed": [],
		"company_idcard": [],
	}
	loading.value = false



}


const getStatsImg = computed(() => {
	return (status: boolean, type: number) => {
		if (type == 1) return status ? imgHost("c_a1.png") : imgHost("c_a0.png");
		if (type == 2) return status ? imgHost("c_e1.png") : imgHost("c_e0.png");
		if (type == 3) return status ? imgHost("c_d1.png") : imgHost("c_d0.png");
		if (type == 4) return status ? imgHost("c_c1.png") : imgHost("c_c0.png");
		if (type == 5) return status ? imgHost("c_b1.png") : imgHost("c_b0.png");
		return imgHost("c_w.png");
	}
})
</script>

<style>
page {
	background: #FFFFFF;
}
</style>
<style lang="less" scoped>
.c_yy {
	box-shadow: 0rpx 3rpx 16rpx 0rpx rgba(0, 0, 0, 0.05);
}

.c_grimg {
	width: 133rpx;
	height: 54rpx;
}

.c_sfzimg {
	width: 302rpx;
	height: 180rpx;
	border-radius: 3rpx;
	overflow: hidden;
}

.c_zjimg {
	width: 655rpx;
	height: 290rpx;
	border-radius: 3rpx;
	overflow: hidden;
}
</style>